<template>
  <el-dialog
    title="选择采购单"
    v-model="visible"
    width="50%"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <div class="search">
      <el-input
        v-model="searchText"
        prefix-icon="el-icon-search"
        placeholder="标题"
        clearable
      >
        <template #append>
          <el-button icon="el-icon-search" @click="selectOrder"></el-button>
        </template>
      </el-input>
    </div>

    <el-table
      ref="table"
      :data="orderList"
      row-key="id"
      stripe
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column
        label="采购部门"
        prop="procuredDepartmentName"
      ></el-table-column>
      <el-table-column
        label="采购人"
        prop="procuredAdminName"
      ></el-table-column>
      <el-table-column label="采购时间" prop="procuredTime"></el-table-column>
      <el-table-column label="到货时间" prop="arrivalTime"></el-table-column>
      <el-table-column
        label="采购金额(元)"
        prop="procuredPrice"
      ></el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      small
      layout="total, prev, pager, next"
      :page-size="limit"
      :total="total"
      @current-change="handleCurrentChange"
      v-if="total > 10"
    />

    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        type="primary"
        :loading="isSaveing"
        @click="confirm()"
        :disabled="selectedList.length != 1"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>
<script>
export default {
  name: 'selectVendor',
  emits: ['closed', 'setVendor'],
  data () {
    return {
      isSaveing: false,
      visible: false,
      orderList: [],//订单列表
      selectedList: [],
      searchText: '',
      limit: 10,//每页条数
      page: 1,//页码
      currentPage: 1,
      pageSize: 1,
      total: 0
    }
  },

  methods: {
    open () {
      this.visible = true
      this.getOrderList()

    },

    // 获取采购订单
    async getOrderList () {
      let param = {
        limit: this.limit,
        page: this.page,
        search: this.searchText,
        state: 1//审核状态 0未审核1审核通过2不通过
      }
      let { data } = await this.$API.purchase.getPurchaseList.get(param)
      this.orderList = data
      console.log(this.orderList)
    },

    // 搜索订单
    selectOrder () {
      this.getOrderList()
    },

    // 选择订单
    handleSelectionChange (list) {
      this.selectedList = list
    },


    // 确认选择
    confirm () {
      this.visible = false
      this.$emit('setOrder', this.selectedList[0])
    },

    handleCurrentChange (val) {
      this.page = val
      this.getOrderList()
    }
  }
}
</script>
<style lang='scss' scoped>
.search {
  width: 50%;
  margin-bottom: 15px;
}
</style>